<template>
  <div id="app">
    <br />
    <!-- 其中type属性控制的是颜色，icon是图标
                  primary是蓝色        
                  success是绿色
                  info是灰色
                  warning是黄色
                  danger是红色
                -->
    <!-- <el-row>
            <el-button icon="el-icon-search" circle @click="changeflag" ></el-button>
            <input type="text" v-show="isflag" v-model="arrays">
            <el-button type="primary" icon="el-icon-edit" circle @click="changeflagA"></el-button>
           
            <el-button type="success" icon="el-icon-check" circle @click="changeflagB"></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>   
             
      
            <br>
                <textarea v-show="isflagA" v-model="arrays"></textarea> -->
    <!-- <Message ></Message> -->
    <!-- <List v-show="isflagB"></List>
                 
          </el-row> -->
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">书店系统修改密码</h3>
      <el-form-item>
        <el-input
          type="text"
          v-model="this.changepassword.userName"
          auto-complete="off"
          placeholder="账号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          v-model="this.changepassword.oldPassword"
          auto-complete="off"
          placeholder="输入旧密码"
          id="oldPassword"
        ><template #suffix>
          <el-icon id="yanjing" @click="yanjing" :size="20"  style="display:block" ><View /></el-icon>
          <el-icon id="hideyanjing" @click="hideyanjing" :size="20" style="display:none" ><Hide /></el-icon>
        </template></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          v-model="this.changepassword.newPassword"
          auto-complete="off"
          placeholder="输入新密码"
          id="newPassword"
        ><template #suffix>
          <el-icon id="newyanjing" @click="newyanjing" :size="20"  style="display:block" ><View /></el-icon>
          <el-icon id="newhideyanjing" @click="newhideyanjing" :size="20" style="display:none" ><Hide /></el-icon>
        </template></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%; background: #505458; border: none"
          @click="changepassword"
          @keydown.enter="changepassword"
          >确认</el-button
        >
      </el-form-item>
      <!-- <el-form-item style="width: 20%">
        <a
        href="http://101.33.228.125/register"
          style="
        width: 100%;
            background: blanchedalmond;
            border: none;
            text-decoration: none;
          "
          >注册</a
        >
      </el-form-item> -->
    </el-form>
    <br />
    <!-- <router-link class="home" to="/home">Home</router-link>|
          <keep-alive include="News">
          <router-view></router-view>
          </keep-alive> -->
    <buy-dialog ref="buyDialog"></buy-dialog>
  </div>
</template>
  <script>
export default {
  name: "ChangePassword",
  data() {
    return {
      changepassword: {
        userName: "",
        oldPassword: "",
        newPassword: "",
      },
      oldxianshi: false,
      newxianshi:false
    };
    },
    methods: {
      changepassword() {
        var data = new FormData()
        data.append("userName", this.changepassword.userName)
        data.append("oldPassword", this.changepassword.oldPassword)
          data.append("newPassword", this.changepassword.newPassword)
        this.$axios.post("/changepassword", data).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
        message: "修改成功",
        type: "success",
            });
      this.$router.replace('/login')
          } else if (resp.data.code==400) {
            this.$message({
        message: "修改失败",
        type: "error",
      });
          }
         })
      },
      yanjing() {
      var oldPassword = document.getElementById("oldPassword");
    
    
     
   
      oldPassword.type = 'text'
      var yanjing = document.getElementById("yanjing")
     yanjing.style.display = 'none';
      var hideyanjing = document.getElementById("hideyanjing")
       hideyanjing.style.display = 'block'
     
      console.log(25252525);
    },
    hideyanjing() {
      var oldPassword = document.getElementById("oldPassword");
    
    
     
   
      oldPassword.type = 'password'
      var yanjing = document.getElementById("yanjing")
     yanjing.style.display = 'block'
      var hideyanjing = document.getElementById("hideyanjing")
       hideyanjing.style.display = 'none'
     
      console.log(25252525);
    },
    newyanjing() {
      var newPassword = document.getElementById("newPassword");
    
    
     
   
      newPassword.type = 'text'
      var newyanjing = document.getElementById("newyanjing")
     newyanjing.style.display = 'none';
      var newhideyanjing = document.getElementById("newhideyanjing")
       newhideyanjing.style.display = 'block'
     
      console.log(25252525);
    },
    newhideyanjing() {
      var newPassword = document.getElementById("newPassword");
    
    
     
   
      newPassword.type = 'password'
      var newyanjing = document.getElementById("newyanjing")
     newyanjing.style.display = 'block'
      var newhideyanjing = document.getElementById("newhideyanjing")
       newhideyanjing.style.display = 'none'
     
      console.log(25252525);
    },
        
  }
};
</script>
  <style scoped>
/* #a1 {
    background: url("../assets/eva.jpg");
    width: 100%;
    height: 100%;
    position: fixed;
    background-position: center;
    background-size: cover;
  } */
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: -100px 580px;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: absolute;
  margin-top: 17%;
    margin-left: 40%;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
#app {
  background-color: #505458;
  background-image: url("../assets/loginback.jpg");
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
div {
  margin: 0;
}
el-switch el-tooltip is-checked {
  margin-top: -100px;
}
</style>